<template>
	<div class="video-intro">
		<div class="video-intro-banner">
			<div class="banner-cont">
				<div class="crumb">
					<i class="breadcrumb-icon"></i>
					<el-breadcrumb separator="/">
						<el-breadcrumb-item :to="{ path: '/' }">主页</el-breadcrumb-item>
						<el-breadcrumb-item><a href="/">视频学习</a></el-breadcrumb-item>
					</el-breadcrumb>
				</div>
				<div class="video-title">{{lessonIntro.lessonName}}</div>
				<div class="video-author">
					<div class="author-avatar">
						<img :src="author.avatar" alt="" />
					</div>
					<div class="author-intro">
						<div class="author-name">{{author.teacherName}}</div>
						<div class="author-item">{{author.teacherAddress}}</div>
					</div>
					<div class="video-intro-item">
						<div class="author-item">
							<i></i>
							<span>难度：{{lessonIntro.difficulty}}</span>
						</div>
						<div class="author-item">
							<i></i>
							<span>学习人数：{{lessonIntro.lessonNum}}</span>
						</div>
					</div>
					<div class="video-intro-item">
						<div class="author-item">
							<i></i>
							<span>时长：{{lessonIntro.lessonTime}}分钟</span>
						</div>
						<div class="author-item">
							<i></i>
							<span>综合评分：{{lessonIntro.commentNum}}</span>
						</div>
					</div>
				</div>
			</div>

		</div>
		<div class="video-intro-types">
			<div class="typs-cont">
				<div class="intro-type " :class="{'types-active': activeType == 1}" @click="activeType=1">课程章节</div>
				<!-- <div class="intro-type" :class="{'types-active': activeType == 2}" @click="activeType=2">问答评论</div> -->
				<div class="intro-type" :class="{'types-active': activeType == 3}" @click="activeType=3">用户评价</div>
			</div>

		</div>
		<div class="intro-details">
			<div class="chapter" v-if="activeType == 1">
				<div class="chapter-intro" v-if="lessonIntro.summary">
					{{lessonIntro.summary}}
				</div>
				<div class="chapter-intro" v-for="item in allCapter">
					<div class="chapter-title">{{item.chapterName}}</div>
					<div class="chapter-item-intro">{{item.chapterSummary}}</div>
					<div class="chapter-video" @click="goVideo(item)">
						<div class="chapter-video-name">
							<i class="video-play"></i>
							<span>{{item.chapterName}} ({{item.lessonTime}}分钟)</span>
						</div>
						<div class="chapter-video-option">
							<span>{{item.learnedText}}</span>
							<i v-if="item.learnedText != '已学完'" class="circle-icon circle-active"></i>
							<i v-else class="el-icon-circle-check"></i>
						</div>
					</div>
				</div>
				<el-empty description="暂无章节" v-if="activeType == 1 && allCapter.length == 0"></el-empty>
			</div>
			<div class="chapter" v-if="activeType == 3">
				<div class="comment-item" v-for="item in commentList">
					<div class="comment-title">
						<div class="title-left">
							<div class="comment-avatar">
								<!-- <img :src="item.userAvatar" alt="" /> -->
								<el-image style="width: 100%; height: 100%" :src="item.userAvatar" fit="cover">
									<div slot="error" class="image-slot">
										<img src="../assets/img/no_img2.png" alt="" />
									</div>
								</el-image>
							</div>
							<div class="comment-name">{{item.userNickName}}</div>
						</div>
						<!-- <div class="title-right">
							<span>0 回答</span>
							<span>23 浏览</span>
						</div> -->
					</div>
					<div class="comment">{{item.content}}</div>
					<div class="comment-option">
						<div class="option-left">
							<el-rate disabled v-model="item.starNum"></el-rate>
							<!-- <div class="option-btn">我来回答</div>
							<div class="btn-intro">+2积分</div> -->
						</div>
						<div class="comment-time">{{item.pubDate}}</div>
					</div>
				</div>
				<el-empty description="暂无课程评论" v-if="commentList.length == 0"></el-empty>
			</div>
			<div class="recommend">
				<div class="study-plan">
					<div class="plan-bar">
						<div class="bar-title">
							<span>已学{{oneLesson.schedule || 0}}%</span>
							<span>已耗时{{getTime(oneLesson.lessonTime) || 0}}</span>
						</div>
						<div class="bar">
							<el-progress :show-text="false" :percentage="oneLesson.schedule"></el-progress>
						</div>
						<!-- <div class="bar-intro">上次学至 1-1 检索系统介绍</div> -->
					</div>
					<div class="study-btn" @click="goNext">继续学习</div>
					<p class="lesson-notice-title">课程须知</p>
					<p class="lesson-notice">1、掌握基本的检索系统的知识操作
					</p>
					<p class="lesson-notice">2、足够的练习时间</p>
				</div>
				<div class="recommend-list">
					<div class="recommend-title">推荐课程</div>
					<div class="recommend-item" @click="goNewLesson(item)" v-for="item in topLesson">
						<div class="recommend-img">
							<!-- <img :src="item.logoUrl" alt="" /> -->
							<el-image style="width: 100%; height: 100%" :src="item.logoUrl" fit="cover">
								<div slot="error" class="image-slot">
									<img src="../assets/img/no_img.png" alt="" />
								</div>
							</el-image>
						</div>
						<div class="recommend-intro">
							<div class="item-title">{{item.lessonName}}</div>
							<div class="item-intro">
								<span>{{item.categoryName}}</span>
								<span>{{item.difficulty}}</span>
								<span>
									<i class="el-icon-user-solid"></i>
									{{item.articleHit}}
								</span>
								<el-rate disabled-void-color="#ccc" disabled :value="item.commentNum
"></el-rate>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import {
		getLessonDetailsApi,
		getLessonChapterApi,
		getTopLessonApi,
		getOneLessonApi,
		studyLearningApi,
		getLessinCommont,
		getChapterHasTimeApi
	} from '@/api/Lesson'
	export default {
		data() {
			return {
				lessonId: this.$route.query.lessonId,
				author: {},
				activeType: 1,
				lessonIntro: {},
				allCapter: [],
				topLesson: [],
				oneLesson: {},
				commentList: []
			}
		},
		created() {
			this.getVideoInfo()
			this.getChapter()
			this.getTopLesson()
			this.getOneLesson()
			this.getCommontList()

		},
		methods: {
			getCommontList() {
				getLessinCommont({
					lessonId: this.lessonId
				}).then(res => {
					this.commentList = res.rows
				})
			},
			getOneLesson() {
				getOneLessonApi({
					lessonId: this.lessonId
				}).then(res => {
					if (res.code == 200) {
						this.oneLesson = res.data
						this.oneLesson.schedule = Number(this.oneLesson.schedule)
					}
				})
			},
			getTopLesson() {
				getTopLessonApi().then(res => {
					this.topLesson = res.data
				})
			},
			getChapter() {
				getChapterHasTimeApi({
					// getLessonChapterApi({
					lessonId: this.lessonId
				}).then(res => {
					let list = res.rows
					// learned 1已学完 2学习中 3未学习
					let obj = {
						1: '已学完',
						2: '学习中',
						3: '未学习'
					}
					list.forEach(item => {
						let t = Number(item.lessonTime) * 60,
							isT = Number(item.userLessonTime)
						if (isT != 0 && isT < t) {
							item.learnedText = '学习中'
						} else if (isT == 0) {
							item.learnedText = '未学习'
						} else if (isT != 0 && isT == t) {
							item.learnedText = '已学完'
						}
						// item.learnedText = obj[item.learned]
					})
					this.allCapter = list
				})
			},
			getVideoInfo() {
				getLessonDetailsApi({
					lessonId: this.lessonId
				}).then(res => {
					console.log(res.data.teacherResponse)
					this.lessonIntro = res.data
					this.author = res.data.teacherResponse
				})
			},
			goVideo(item) {
				this.$router.push({
					path: '/VideoDetails',
					query: {
						chapterId: item.chapterId,
						lessonId: this.lessonId
					}
				})
			},
			goNext() {
				studyLearningApi({
					uerslessonId: this.oneLesson.userLessonId
				}).then(res => {
					let data = res.data
					this.$router.push({
						path: '/VideoDetails',
						query: {
							chapterId: data.chapterId,
							lessonId: data.lessonId
						}
					})
				})

			},
			goNewLesson(item) {
				this.$router.push({
					path: '/VideoIntro',
					query: {
						lessonId: item.lessonId
					}
				})
			},
			getTime(time) {
				var secondTime = parseInt(time); // 秒
				var minuteTime = 0; // 分
				var hourTime = 0; // 小时
				if (secondTime > 60) {
					minuteTime = parseInt(secondTime / 60);
					//获取秒数，秒数取余，得到整数秒数
					secondTime = parseInt(secondTime % 60);
					//如果分钟大于60，将分钟转换成小时
					if (minuteTime > 60) {
						//获取小时，获取分钟除以60，得到整数小时
						hourTime = parseInt(minuteTime / 60);
						//获取小时后取余的分，获取分钟除以60取余的分
						minuteTime = parseInt(minuteTime % 60);
					}
				}
				let str = ''
				str += hourTime ? hourTime + '小时' : ''
				str += minuteTime ? minuteTime + '分钟' : ''
				str += secondTime ? secondTime + '秒' : ''
				return str
			}
		},
		watch: {
			$route(to, from) {
				this.lessonId = to.query.lessonId
				this.activeType = 1
				this.getVideoInfo()
				this.getChapter()
				this.getOneLesson()
				this.getCommontList()
			}
		}
	}
</script>

<style lang="less">
	@contWidth: 1280px;

	.video-intro {
		background-color: #F5F5F5;

		.video-intro-banner {

			background: url(../assets/img/user_banner.png);
			background-size: cover;
		}

		.banner-cont {
			width: @contWidth;
			height: 240px;
			margin: 0 auto;
		}

		.crumb {
			height: 42px;
			display: flex;
			align-items: center;
		}

		.breadcrumb-icon {
			width: 20px;
			height: 20px;
			margin-right: 8px;
			background: url(../assets/img/crumb_icon.png);
			background-size: 100% 100%;
		}

		.is-link {
			font-size: 14px;
			font-family: PingFangSC, PingFang SC;
			font-weight: 500;
			color: #fff;
		}

		.el-breadcrumb__item:last-child .el-breadcrumb__inner,
		.el-breadcrumb__item:last-child .el-breadcrumb__inner a,
		.el-breadcrumb__item:last-child .el-breadcrumb__inner a:hover,
		.el-breadcrumb__item:last-child .el-breadcrumb__inner:hover {
			color: #fff;
		}

		.el-breadcrumb__separator {
			color: #fff;
		}

		.video-title {
			padding: 18px 0 40px;
			font-size: 30px;
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			color: #FFFFFF;
		}

		.video-author {
			display: flex;
			align-items: center;
		}

		.author-avatar {
			width: 42px;
			height: 42px;
			border-radius: 42px;
			overflow: hidden;
			margin-right: 14px;
			display: flex;
			justify-content: center;
			align-items: center;
			border: 1px solid #fff;
		}

		.author-intro {
			margin-right: 120px;
			font-size: 13px;
			font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
			font-weight: 400;
			color: #FFFFFF;
			line-height: 18px;
		}

		.author-name {
			font-size: 16px;
			margin-bottom: 6px;
		}

		.video-intro-item {
			margin-right: 40px;
			font-size: 13px;
			font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
			font-weight: 400;
			color: #FFFFFF;
			line-height: 18px;

			.author-item {
				display: flex;
				align-items: center;

				&:nth-of-type(1) {
					margin-bottom: 6px;
				}

				i {
					display: block;
					width: 6px;
					height: 6px;
					background-color: #fff;
					margin-right: 20px;
					border-radius: 6px;
				}
			}
		}

		.video-intro-types {
			background-color: #fff;
		}

		.typs-cont {
			width: @contWidth;
			height: 77px;
			margin: 0 auto;
			display: flex;
			align-items: center;
		}

		.intro-type {
			position: relative;
			font-size: 16px;
			font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
			font-weight: 400;
			color: #000000;
			margin-right: 126px;
			cursor: pointer;
		}

		.types-active {
			color: #2360FE;

			&::before {
				display: block;
				content: "";
				position: absolute;
				bottom: -12px;
				left: 50%;
				transform: translateX(-50%);
				width: 21px;
				height: 4px;
				background: #2360FE;
			}
		}

		.intro-details {
			display: flex;
			width: @contWidth;
			margin: 0 auto;
			padding-top: 20px;

			.chapter {
				flex: 1;
			}

			.recommend {
				width: 300px;
				margin-left: 20px;
				transform: translateY(-200px);
			}
		}

		.chapter-intro {
			background-color: #fff;
			margin-bottom: 16px;
			padding: 20px 30px;
			font-size: 13px;
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			color: #333333;
			line-height: 18px;
		}

		.chapter-title {
			font-size: 18px;
			font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
			font-weight: 500;
			color: #000000;
			margin-bottom: 12px;
		}

		.chapter-item-intro {
			margin-bottom: 20px;
		}

		.chapter-video {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 20px;
			cursor: pointer;
		}

		.chapter-video-name {
			display: flex;
			align-items: center;
		}

		.chapter-video-option {
			display: flex;
			align-items: center;

			span {
				margin-right: 10px;
			}

			i {
				color: #2360FE;
				font-size: 18px;
			}
		}

		.video-play {
			width: 16px;
			height: 16px;
			margin-right: 10px;
			background: url(../assets/img/video_play_icon.png);
			background-size: 100% 100%;
		}

		// .circle-icon {
		// 	width: 15px;
		// 	height: 15px;
		// 	border-radius: 15px;
		// 	border: 1px solid #979797;
		// 	margin-left: 18px;
		// }

		.circle-active {
			width: 16px;
			height: 16px;
			border-radius: 16px;
			background: #F4F8FF;
			border: 1px solid #2360FE;
		}

		.study-plan {
			background-color: #fff;
			padding: 22px;
		}

		.bar-title {
			display: flex;
			justify-content: space-between;
			font-size: 14px;
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			color: #333333;
			line-height: 20px;
			margin-bottom: 22px;
		}

		.bar {
			margin-bottom: 22px;
		}

		.bar-intro {
			margin-bottom: 34px;
			font-size: 14px;
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			color: #999999;
		}

		.study-btn {
			width: 235px;
			height: 54px;
			background: #2360FE;
			border-radius: 27px;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 20px;
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			color: #FFFFFF;
			margin: 0 auto;
		}

		.lesson-notice-title {
			padding: 24px 0 16px;
			font-size: 14px;
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			color: #333333;
		}

		.lesson-notice {
			font-size: 14px;
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			color: #333333;
			line-height: 20px;
		}

		.recommend-title {
			padding: 16px 0 11px;
			font-size: 14px;
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			color: #333333;
		}

		.recommend-item {
			display: flex;
			align-items: center;
			margin-bottom: 16px;
			cursor: pointer;
		}

		.recommend-img {
			width: 93px;
			height: 67px;
			border-radius: 8px;
			overflow: hidden;
			margin-right: 11px;

			img {
				width: 100%;
				height: 100%;
			}
		}

		.recommend-intro {
			flex: 1;
			height: 67px;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
		}

		.item-title {
			font-size: 13px;
			font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
			font-weight: 400;
			color: #000000;
			line-height: 18px;
		}

		.item-intro {
			display: flex;
			align-items: center;
			font-size: 11px;
			font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
			font-weight: 400;
			color: #999999;

			span {
				margin-right: 4px;
			}

			.el-rate {
				margin-left: 10px;
			}

			.el-icon-user-solid {
				margin-right: 6px;
			}

			.el-rate__item {
				margin: 0;

			}

			.el-rate__icon {
				margin: 0;
				font-size: 14px;
				line-height: 20px;
			}
		}

		.comment-item {
			background: #FFFFFF;
			margin-bottom: 16px;
			padding: 20px 26px;
		}

		.comment-title,
		.title-left {
			display: flex;
			align-items: center;
			justify-content: space-between;
		}

		.comment-avatar {
			width: 42px;
			height: 42px;
			border-radius: 42px;
			overflow: hidden;
			margin-right: 15px;
		}

		.comment-name {
			font-size: 16px;
			font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
			font-weight: 400;
			color: #000000;
		}

		.title-right {
			font-size: 13px;
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			color: #333333;

			span {
				margin-left: 24px;
			}
		}

		.comment {
			padding: 10px 20px 30px 57px;
			font-size: 13px;
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			color: #333333;
		}

		.comment-option {
			padding-left: 57px;
			display: flex;
			align-items: center;
			justify-content: space-between;
		}

		.option-left {
			display: flex;

			align-items: center;
		}

		.option-btn {
			width: 89px;
			height: 34px;
			background: #0091FF;
			border-radius: 17px;
			display: flex;
			justify-content: center;
			align-items: center;
			cursor: pointer;
			font-size: 14px;
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			color: #FFFFFF;
			margin-right: 10px;
		}

		.comment-time {
			font-size: 13px;
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			color: #333333;
		}

		.no-data {
			width: 100%;
			height: 300px;
			display: flex;
			justify-content: center;
		}
	}
</style>